<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>TechEmpower Framework Benchmark Insight</title>
  <link rel="stylesheet" href="/asset/css/app.css" type="text/css"/>
  <link rel="stylesheet" href="/asset/fa/css/font-awesome.min.css" type="text/css"/>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-109499557-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'UA-109499557-1');
  </script>
</head>
<body>
<h1 id="heading" class="header">TFB Insight</h1>
<div class="body">
  <app></app>
</div>
<script src="/~/asset/js/jquery.js"></script>
<script src="/~/asset/js/jquery.ext.js"></script>
<script src="/asset/js/lodash.js"></script>
<script src="/asset/js/chart.js"></script>
<script src="/~/asset/js/riotjs.js"></script>
<script type="riot/tag" src="/asset/tag/app.tag"></script>
<script type="riot/tag" src="/asset/tag/version.tag"></script>
<script type="riot/tag" src="/asset/tag/nav.tag"></script>
<script type="riot/tag" src="/asset/tag/nav-framework.tag"></script>
<script type="riot/tag" src="/asset/tag/nav-vs.tag"></script>
<script type="riot/tag" src="/asset/tag/nav-top-n.tag"></script>
<script type="riot/tag" src="/asset/tag/main.tag"></script>
<script type="riot/tag" src="/asset/tag/welcome.tag"></script>
<script type="riot/tag" src="/asset/tag/top-n.tag"></script>
<script type="riot/tag" src="/asset/tag/framework.tag"></script>
<script>
    function numberWithCommas(x) {
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }
    Chart.defaults.global.defaultFontColor = '#fff';
    Chart.plugins.register({
        afterDatasetsDraw: function(chart, easing) {
            if ('line' === chart.config.type) {
                return;
            }
            // To only draw at the end of animation, check for easing === 1
            var ctx = chart.ctx;
            chart.data.datasets.forEach(function (dataset, i) {
                var meta = chart.getDatasetMeta(i);
                if (!meta.hidden) {
                    meta.data.forEach(function(element, index) {
                        // Draw the text in black, with the specified font
                        var fontSize = 12;
                        var fontStyle = 'bold';
                        var fontFamily = '"Roboto Mono", Consolas';
                        ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
                        // Just naively convert to string for now
                        var dataString = dataset.data[index].toString();
                        if (dataset.test !== 'density') {
                            dataString = numberWithCommas(dataString) + '/s';
                        } else {
                            dataString = parseFloat(Math.round(dataset.data[index] * 100) / 100).toFixed(2) + "%";
                        }
                        // Make sure alignment settings are correct
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        var x = element._model.x;
                        var y = element._model.y
                        if ('language' !== chart.config.target) {
                            x = x - (dataString.length * 5)
                            if (x < 220) {
                                x = 220;
                            }
                        } else {
                            y = y - 10;
                        }
                        var backup = {
                            fillStyle: ctx.fillStyle,
                            shadowColor: ctx.shadowColor,
                            shadowOffsetX: ctx.shadowOffsetX,
                            shadowOffsetY : ctx.shadowOffsetY,
                            shadowBlur: ctx.shadowBlur
                        }
                        ctx.fillStyle = 'rgb(255,255,255)';
                        ctx.shadowColor = 'black';
                        ctx.shadowBlur = 2;
                        ctx.shadowOffsetX = 1;
                        ctx.shadowOffsetY = 1;
                        ctx.fillText(dataString, x, y);
                        ctx.fillStyle = backup.fillStyle
                        ctx.shadowColor = backup.shadowColor
                        ctx.shadowOffsetX = backup.shadowOffsetX
                        ctx.shadowOffsetY = backup.shadowOffsetY
                        ctx.shadowBlur = backup.shadowBlur
                    });
                }
            });
        }
    });
    var Store = function () {
        riot.observable(this)
    }
    riot.store = new Store()
    riot.mount('*')
    riot.store.on('set-heading', function(param) {
        var heading = param.heading;
        if (heading) {
            $('#heading').text('TFB Insight - ' + heading)
        } else {
            $('#heading').text('TFB Insight')
        }
    })
    route.start(true)
    setTimeout(route.exec, 200);
</script>
</body>
</html>
